<template>
  <view>
    <h1>停车优惠</h1>
    <view class="offer-list">
      <view v-for="offer in offers" :key="offer.id" class="offer-item">
        <view class="offer-header">
          <text>{{ offer.name }}</text>
          <image :src="offer.logo" alt="logo" class="offer-logo" />
        </view>
        <view class="offer-content">
          <text class="offer-description">{{ offer.description }}</text>
          <view class="offer-details">
            <text>类型: {{ offer.type }}</text>
            <text>有效期至: {{ offer.validUntil }}</text>
          </view>
          <button class="offer-button" @click="copyCode(offer.code)">
            使用优惠码: {{ offer.code }}
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const offers = ref([
  {
    id: 1,
    name: "城市中心停车场",
    logo: "https://picsum.photos/seed/city/200",
    description: "工作日停车满4小时免费延长1小时",
    validUntil: "2023-07-31",
    code: "CITY4PLUS1",
    type: "室内停车场"
  },
  {
    id: 2,
    name: "绿地公园停车场",
    logo: "https://picsum.photos/seed/park/200",
    description: "周末全天停车八折优惠",
    validUntil: "2023-08-15",
    code: "PARK20OFF",
    type: "露天停车场"
  },
  {
    id: 3,
    name: "商业广场地下停车场",
    logo: "https://picsum.photos/seed/mall/200",
    description: "夜间停车（20:00-次日8:00）半价",
    validUntil: "2023-09-30",
    code: "NIGHT50",
    type: "地下停车场"
  }
]);

const copyCode = (code) => {
  uni.setClipboardData({
    data: code,
    success: () => {
      uni.showToast({
        title: `优惠码 ${code} 已复制到剪贴板！`,
        icon: 'none'
      });
    }
  });
};
</script>

<style scoped>
:root {
  --primary-color: #E3F2FD;
  --secondary-color: #BBDEFB;
  --text-color: #1565C0;
  --background-color: #F5F5F5;
}

h1 {
  text-align: center;
  color: var(--text-color);
  margin-bottom: 20px;
}

.offer-list {
  max-width: 600px;
  margin: 0 auto;
}

.offer-item {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.offer-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.offer-header {
  background-color: var(--primary-color);
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.offer-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.offer-content {
  padding: 15px;
}

.offer-description {
  margin-bottom: 10px;
  line-height: 1.4;
}

.offer-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #757575;
  margin-bottom: 10px;
}

.offer-button {
  background-color: var(--secondary-color);
  color: var(--text-color);
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 100%;
  font-size: 16px;
  font-weight: bold;
}

.offer-button:hover {
  background-color: var(--primary-color);
}

@media (max-width: 480px) {
  h1 {
    font-size: 24px;
  }
}
</style>
